<!DOCTYPE html>
<html>
<head>
    <title>轮播图</title>
    <style>
        .slideshow {
            width: 400px;
            height: 300px;
            overflow: hidden;
            position: relative;
        }

        .slideshow img {
            width: 100%;
            height: auto;
            display: none;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="slideshow">
        <img src="static\images\a (1).jpeg" />
        <img src="static\images\a (2).jpeg" />
        <img src="static\images\a (3).jpeg" />
    </div>

    <script>
        let images = document.querySelectorAll('.slideshow img');
        let currentIndex = 0;

        function showImage(index) {
            images.forEach(img => img.style.display = 'none');
            images[index].style.display = 'block';
        }

        function nextImage() {
            currentIndex = (currentIndex + 1) % images.length;
            showImage(currentIndex);
        }

        setInterval(nextImage, 2000);
    </script>
</body>
</html>
